<template>
  <div>
    <router-view></router-view>
    <van-tabbar v-model="active" active-color="#ffb901" route>
      <van-tabbar-item to="/home">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? Home.inactive : Home.active" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item  to="/huoqu">
        <span>探索</span>
        <template #icon="props">
          <img style="width: 1rem;height: 0.8rem;" :src="props.active ? map.inactive : map.active" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item  to="/cut">
        <template #icon="props">
          <div style="background-color: black;box-sizing: border-box;width: 2.5rem;height: 2.5rem;border-radius: 50%;line-height: 2.5rem;padding-top: 25%;">
            <img style="margin: 0 auto;" :src="props.active ? Scissors.active : Scissors.active" />
          </div>
        </template>
      </van-tabbar-item>

      <van-tabbar-item  to="/message">
        <span>信息</span>
        <template #icon="props">
          <img :src="props.active ? message.inactive : message.active" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item  to="/my">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? my.inactive : my.active" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const active = ref(0);
const icon = {
  active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
  inactive:
    'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
};
const Home = {
  active: "/icon/home.png",
  inactive:"/icon/active-home.png"
}
const map = {
  active: "/icon/map.png",
  inactive:"/icon/active-map.png"
}
const message = {
  active: "/icon/message.png",
  inactive:"/icon/active-message.png"
}
const my = {
  active: "/icon/my.png",
  inactive:"/icon/active-my.png"
}
// Scissors
const Scissors={
  active: "/icon/Scissors.png",
}
</script>

<style scoped>
</style>